<template>
  <div class="dialog-container">
    <el-dialog
      :title="title"
      v-model="open"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="formRef" :model="form" label-width="100px">
        <el-form-item label="回复内容" prop="content">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="form.content"
            maxlength="500"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <div class="table-cell" style="text-align: center">
        <el-button size="small" type="primary" @click="saveButton">保 存</el-button>
        <el-button size="small" type="warning" @click="clearButton">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { addReplyEvaluate } from '@/api/reply/reply'
import { ElMessage } from 'element-plus'

// 定义组件名称
defineOptions({
  name: 'reply',
})

interface Props {
  title?: string
}

interface Emits {
  (e: 'update:open', value: boolean): void
}

interface Evaluate {
  id?: number
  content?: string
  evaluateId?: number | null
  [key: string]: any
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
})

const emit = defineEmits<Emits>()

const open = defineModel<boolean>('open', { default: false })
const form = ref<Evaluate>({
  content: '',
  evaluateId: null,
})
const evaluate = ref<Evaluate>({})

const saveButton = () => {
  form.value.evaluateId = evaluate.value.id || null
  addReplyEvaluate(form.value).then((res) => {
    if (res.code == 200) {
      ElMessage.success(res.msg)
    } else {
      ElMessage.error(res.msg)
    }
    form.value.content = ''
    open.value = false
  })
}

const clearButton = () => {
  open.value = false
}

defineExpose({
  open,
  form,
  setEvaluate(data: Evaluate) {
    evaluate.value = data
  },
})
</script>

<style scoped></style>
